<template>
  <div class="user-info">
    <el-form class="user-info__form" size="small" label-width="1rem">
      <el-form-item label="代理账户名：">
        {{user.username}}
      </el-form-item>
      <el-form-item label="注册时间：">
        {{user.registerDate | toTime}}
      </el-form-item>
      <el-form-item label="注册IP：">
        {{form.registerIp}}
      </el-form-item>
    </el-form>

    <el-form class="user-info__form"
             :model="form"
             :rules="rules"
             @submit.native.prevent="doSave({action: 'saveForm', form: 'form'})"
             ref="form"
             :disabled="loading"
             size="medium"
             label-width="1rem"
    >

      <!-- 姓名 -->
      <el-form-item prop="reallyName" label="姓名：" v-if="!noReallyName">
        <div class="user-info__item-main">
          <div>{{form.reallyName}}</div>
        </div>
      </el-form-item>

      <!-- 生日 -->
      <el-form-item prop="birthday" label="生日：" v-if="noBirthday">
        <div class="user-info__item-main">
          <div>
            <el-date-picker
              class="user-info__item-input"
              v-model="form.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="beforeAdult"
              :default-value="beforeAdultTimestamp()"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <el-tip>Ps：生日填写后不可再次修改</el-tip>
        </div>
      </el-form-item>

      <el-form-item label="生日：" v-else>
        <div class="user-info__item-main">
          <div>{{form.birthday}}</div>
        </div>
      </el-form-item>

      <el-form-item label="姓名：" v-else>
        <div class="user-info__item-main">
          <div>{{form.reallyName}}</div>
        </div>
      </el-form-item>

      <el-form-item prop="sex" label="性别：">
        <el-radio-group v-model="form.sex">
          <el-radio :label="sex.value" :key="sex.value" v-for="sex in consts.SEX">{{sex.title}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {factory, form, pickerOption} from '@/build';

  import {
    getUserDetail as getApi,
    saveUserDetail as saveApi
  } from '@/services/api/user';

  export default {
    name: "user-info",

    mixins: [form, pickerOption],

    data() {
      return {
        form: {
          nickName: undefined,
          birthday: undefined,
          reallyName: undefined,
          sex: undefined
        },
        rules: {
          nickName: factory.getRule('nickName', {
            required: true
          }),
          birthday: factory.getRule('birthday'),
          reallyName: factory.getRule('reallyName'),
        },
      };
    },

    methods: {},

    computed: {
      noBirthday() {
        return !this.user.birthday;
      },
      noReallyName() {
        return !this.user.reallyName;
      },
      ...mapState({
        user: state => state.user
      })
    },

    mounted() {
      this.bindGet(getApi, 'form');
      this.bindSave(saveApi, 'saveForm', 'form', {
        afterSuccess: () => {
          this.$store.dispatch(types.OAUTH);
          
        }
      });

      this.getAll();
    }
  };
</script>

<style lang="scss" scoped>
 @include b(user-info) {
   @include e(nickName) {
     width: 380px;
   }

   @include e(item-main) {
     display: flex;
     .el-tip {
       margin-left: 30px;
       flex: 1;
     }
   }
   @include e(item-input) {
     width: 380px;
   }

   .el-button {
     width: 260px;
   }
 }
</style>